<template>
  <div>
    <div class="fbxw_box">
      <a-button type="primary" @click="retpage " class="fh_btn">返回</a-button>
      <div class="fbxw_inp">
        <a-divider>{{xwtit}}</a-divider>
        <ul>
          <li>
            <span class="inp_tit">
              <span class="red">*</span> 新闻标题：
            </span>

            <a-input v-model="title" placeholder="请输入新闻标题" style="width:250px;" />
          </li>
          <li>
            <span class="inp_tit">
              <span class="red">*</span>关键词：
            </span>

            <a-input v-model="keyword" placeholder="#关键字之间使用英文逗号','隔开" style="width:250px;" />
          </li>
          <li>
            <span class="inp_tit">
              <span class="red">*</span>描述：
            </span>
            <a-textarea v-model="describe" class="textarea" placeholder style="width:250px;"></a-textarea>
            <!-- <p class="ts">#多个关键字之间使用英文逗号','隔开</p> -->
          </li>
          <li>
            <span class="inp_tit">发布时间：</span>
            <!-- <a-input placeholder="请输入发布时间" style="width:250px;" /> -->

            <!-- show-time -->
            <a-date-picker
              placeholder="请输入发布时间"
              style="width:250px;"
              :defaultValue="moment(pushTime)"
              @change="dateChange"
              @ok="onOk"
            />
          </li>
          <li>
            <span class="inp_tit">显示状态：</span>

            <a-radio-group
              name="radioGroup"
              :default-value="alive"
              @change="ztradio"
              v-model="alive"
            >
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </li>
          <li>
            <span class="inp_tit">模块类型：</span>
            <a-select :default-value="c_id" style="width: 250px" @change="mklxchaneg">
              <a-select-option value="0">未分类</a-select-option>
              <a-select-option value="1">热点资讯</a-select-option>
              <a-select-option value="2">置顶新闻</a-select-option>
              <a-select-option value="3">推荐新闻</a-select-option>
            </a-select>
          </li>
          <li class="slt_box">
            <span class="inp_tit">缩略图：</span>
            <div class="clearfix">
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
                accept=".jpg, .jpeg, .png"
              >
                <div v-if="fileList.length < 1">
                  <!-- <a-icon type="plus" /> -->
                  <!-- <a-icon type="vertical-align-bottom" /> -->
                  <!-- <a-icon type="vertical-align-top" /> -->
                  <!-- <a-icon type="cloud-upload" /> -->
                  <a-button style="width:150px;">
                    <a-icon type="upload" />上传
                  </a-button>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </li>
          <li>
            <span class="inp_tit">录入员：</span>

            <a-input v-model="inputName " v-if="!wydt" placeholder="请输入录入人员" style="width:250px;" />
            <!-- <a-input v-model="lry" placeholder="请输入录入人员" style="width:250px;" /> -->
            <a-select
              show-search
              placeholder="请选择录入员"
              option-filter-prop="children"
              style="width: 250px"
              v-if="wydt"
              v-model="inputName"
              allowClear
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="lrychange"
              @search="lrysearch"
            >
              <a-select-option
                v-for="(item,i) in wydtlist"
                :key="i"
                :value="item.SQDWID"
              >{{item.GSMC}}</a-select-option>
            </a-select>
          </li>

          <li>
            <span class="inp_tit">出处：</span>
            <a-input placeholder="请输入出处" v-model="source " style="width:250px;" />
          </li>

          <!-- <li>
            <span class="inp_tit">市场区域：</span>

            <a-radio-group
              name="radioGroup"
              :default-value="region_area"
              @change="scqyradio"
              v-model="region_area"
            >
              <a-radio value="东部">东部</a-radio>
              <a-radio value="中南">中南</a-radio>
              <a-radio value="西部">西部</a-radio>
              <a-radio value="北方">北方</a-radio>
            </a-radio-group>
          </li>-->

          <li class="edit_abs">
            <div class="edit_container">
              <Editor ref="froalaEditor" @open="init" @on-change="changeContent"></Editor>
            </div>
          </li>
          <li class="sub_li">
            <div class="sub_btn">
              <a-button @click="retpage">返回</a-button>
              <a-button type="primary" @click="subxwfb">提交</a-button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="fbxw_tk" v-if="$store.state.fbxwflag">
      <div class="fbxw_btn">
        <!-- <div class="close" @click="close">
          <a-icon type="close" />
        </div>-->
        <a-button @click="linkxw('国际新闻',1)">国际新闻</a-button>
        <a-button @click="linkxw('国内新闻',2)">国内新闻</a-button>
        <a-button @click="linkxw('展会信息',3)">展会信息</a-button>
        <a-button @click="linkxw('轴承访谈',4)">轴承访谈</a-button>
        <a-button @click="linkxw('网员动态',5)">网员动态</a-button>
        <a-button @click="linkxw('轴承钢市场',6)">轴承钢市场</a-button>
        <a-button @click="linkxw('轴承钢价格',7)">轴承钢价格</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import moment from "moment";
import Editor from "../froalaed/froalaed.vue";
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  inject: ["reload"],

  data() {
    return {
      content: "",
      previewVisible: false,
      previewImage: "",
      fileList: [],
      zt_radio: 1,
      region_area: "",
      lry: "",
      newsType: "",
      title: "",
      keyword: "",
      describe: "",
      // pushTime: moment(new Date(),'MMMM DDDD YYYY, h:mm:ss a'),
      pushTime: moment(new Date()).format("YYYY-MM-DD hh:mm:ss"),
      alive: null,
      fbxwflag: true,
      xwtit: "",
      wydt: false,
      wydtlist: "",
      source: "",
      inputName: "",
      gsmc_id: "",
      pic_thumbUrl: "",
      c_id:'0'
    };
  },

  methods: {
    moment,
    init() {
      console.log("!1111111111");
      this.$nextTick(() => {
        console.log(this.content);
        this.$refs.froalaEditor.setHtml(this.content);
      });
    },
    changeContent(html) {
      this.content = html;
    },
    handleCancel() {
      this.previewVisible = false;
    },
      mklxchaneg(value) {
        this.c_id=value
      console.log(`selected ${value}`);
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      console.log(this.fileList);
    },
    dateChange(value, dateString) {
      console.log("Selected Time: ", value);
      console.log("Formatted Selected Time: ", dateString);
      this.pushTime = dateString;
    },
    onOk(value) {
      console.log("onOk: ", value);
    },
    ztradio() {
      console.log(this.alive);
    },
    scqyradio() {
      console.log(this.region_area);
    },
    callback(key) {
      console.log(key);
    },
    close() {
      //   this.fbxwflag = false;
      this.$store.state.fbxwflag = false;
    },
    linkxw(val, key) {
      // this.$router.push("/fbxw?name="+val)
      console.log(val);
      this.xwtit = val;
      this.newsType = key;
      if (val == "网员动态") {
        this.wydt = true;
        this.getSelectYbGsmc();
      }
      this.$store.state.fbxwflag = false;
    },
    getSelectYbGsmc() {
      this.axios
        .post(
          "yangben/SelectYbGsmc.php",
          qs.stringify({
            gsmc: this.gsmc
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.wydtlist = res.data.result;
          }
        });
    },
    subxwfb() {
      console.log(this.pushTime);
      if (this.fileList.length) {
        this.pic_thumbUrl = this.fileList[0].thumbUrl;
      }

      if (this.$store.state.xiugaiflag != "edit") {
        this.axios
          .post(
            "xinwen/AddNews.php",
            qs.stringify({
              newsType: this.newsType,
              title: this.title,
              keyword: this.keyword,
              describe: this.describe,
              pushTime: this.pushTime,
              alive: this.alive,
              pic: this.pic_thumbUrl,
              inputName: this.inputName,
              source: this.source,
              region_area: this.region_area,
              content: this.content,
              c_id:this.c_id
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              // this.reload();
              this.$router.push("/xwgl");
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        console.log(this.$store.state.content);
        this.axios
          .post(
            "xinwen/NewsModify.php",
            qs.stringify({
              newsType: this.newsType,
              id: this.$store.state.modifyval.ID,
              title: this.title,
              keyword: this.keyword,
              describe: this.describe,
              pushTime: this.pushTime,
              alive: this.alive,
              pic: this.pic_thumbUrl,
              c_id:this.c_id,
              inputName:
                this.xwtit != "网员动态" ? this.inputName : this.gsmc_id,
              source: this.source,
              region_area: this.region_area,
              content:
                this.content == "" ? this.$store.state.content : this.content
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.$store.state.xiugaiflag = "";
              // this.reload();
              // this.$router.push("/xwgl");
              this.retpage();
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }
    },
    lrychange(value) {
      console.log(`selected ${value}`);
      this.inputName = value;
      this.gsmc_id = value;
      if (value == undefined) {
        this.gsmc = "";
        this.getSelectYbGsmc();
      }
      // for(var i=0;i<this.wydtlist.length;i++){
      //   if(value==this.wydtlist[i].GSMC){
      //      this.gsmc_id=this.wydtlist[i].SQDWID
      //      this.inputName=this.wydtlist[i].SQDWID
      //   }
      // }
    },
    lrysearch(value) {
      console.log(value);
      this.gsmc = value;
      this.getSelectYbGsmc();
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    retpage() {
      this.$router.push("/xwgl");
      this.$store.state.modifyval = "";
      this.$store.state.content = "";

      // this.$store.state.fh_index = [
      //   {
      //     tabs_index: 0,
      //     page_index: 1,
      //     page_index: ""
      //   }
      // ];
    }
  },
  components: {
    Editor
  },
  created() {
    if (this.$route.query.name) {
      console.log(this.$route.query.name);
      this.title = this.$route.query.name;
    }
    this.fbxwflag = true;
    if (this.$store.state.modifyval) {
      console.log("-----------------------");
      console.log(this.$store.state.tabsname);
      this.newsType = this.$store.state.tabsname[0].newsType;
      this.xwtit = this.$store.state.tabsname[0].tabdata;
      if (this.xwtit == "网员动态") {
        this.wydt = true;
        this.getSelectYbGsmc();
        this.gsmc_id = this.$store.state.modifyval.w_person;
        this.inputName = this.$store.state.modifyval.GSMC;
      } else {
        this.inputName = this.$store.state.modifyval.w_person;
      }
      console.log(this.$store.state.tabsname);
      this.title = this.$store.state.modifyval.Title;
      this.keyword = this.$store.state.modifyval.keyword;
      this.describe = this.$store.state.modifyval.Intro;
      this.pushTime = this.$store.state.modifyval.send_date;
      this.c_id = this.$store.state.modifyval.c_id;

      this.alive = Number(this.$store.state.modifyval.vouch);
      // this.fileList=this.$store.state.modifyval.img
      let list = {
        uid: " ",
        name: " ",
        status: " ",
        thumbUrl: this.$store.state.modifyval.img
      };
      this.fileList.push(list);
      this.source = this.$store.state.modifyval.chuchu;

      this.region_area = this.$store.state.modifyval.region;
      // this.$store.state.xiugaiflag = "edit";
      this.$store.state.content = this.$store.state.modifyval.content;
    } else {
      this.$store.state.fbxwflag = true;
    }
    // this.pushTime=moment(new Date()).format("YYYY-MM-DD hh:mm:ss")
    // console.log(moment(new Date()).format("YYYY-MM-DD hh:mm:ss"))
  }
};
</script>

<style lang='less'>
.fbxw_box {
  position: relative;
  //   top: 74px;
  background: #fff;
  width: 98%;
  margin: 0 auto;
  text-align: left;
  padding: 10px 0;
  .fh_btn {
    position: absolute;
    right: 0;
    top: -53px;
  }
  .tit {
    color: #de9100;
  }
  .fbxw_inp {
    ul {
      li {
        margin: 15px 0;
        width: 40%;
        .inp_tit {
          width: 103px;
          text-align: right;
          display: inline-block;
          .red {
            color: red;
            margin-right: 10px;
          }
        }
        .textarea {
          vertical-align: top;
        }
        .ts {
          margin-left: 150px;
          margin-top: 9px;
          color: red;
        }
        .edit_container {
          width: 100%;
          margin: 0 auto;
        }
        .clearfix {
          display: inline-block;
          vertical-align: top;
          width: 70%;
        }
        .sub_btn {
          text-align: center;
          button {
            margin: 0 10px;
            padding: 5px 30px;
            height: 40px;
          }
        }
      }
      @media screen and (max-width: 1500px) {
        .edit_abs {
          width: 65% !important;
        }
      }
      .sub_li {
        position: absolute;
        width: 69%;
        right: 0;
        margin-top: 50px;
      }

      .slt_box {
        // position: absolute;
      }
      .ant-upload.ant-upload-select-picture-card {
        width: 120px;
        height: 25px;
        margin: 0;
      }
      .ant-upload-list-picture-card .ant-upload-list-item {
        width: 50px;
        height: 49px;
      }
      .ant-upload.ant-upload-select-picture-card > .ant-upload {
        padding: 0 8px;
      }
      .edit_abs {
        position: absolute;
        top: 48px;
        right: 0;
        width: 69%;
        z-index: 9;
      }
    }
  }
  .ant-divider-inner-text {
    // color: #f58018;
  }
  .fr-box.fr-basic.fr-top .fr-wrapper {
    max-height: 335px !important;
  }
  .fr-box.fr-basic .fr-element {
    min-height: 100% !important;
  }
}
</style>
